<template>
  <d2-container :class="{'page-compact':crud.pageOptions.compact}">
    <template slot="header">地区选择
      <example-helper title="帮助说明" >
        <link-button href="http://d2-crud-plus.docmirror.cn/d2-crud-plus/guide/extends/area-selector.html">省市区选择组件</link-button>
        <link-button href="http://d2-crud-plus.docmirror.cn/d2-crud-plus/guide/extends/tree-selector.html">树形选择组件</link-button>

      </example-helper>
    </template>
    <d2-crud-x
        ref="d2Crud"
        v-bind="_crudProps"
        v-on="_crudListeners">
      <div slot="header">
        <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"  />
        <el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
        <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners"/>
      </div>

      <template slot="FormBodyAppendSlot">
        <el-button size="small" @click="doClearDict">clearDict</el-button>
        <el-button size="small" @click="doReloadDict">reloadDict</el-button>
        <el-button size="small" @click="doGetDictData">getDictData</el-button>
      </template>
    </d2-crud-x>
  </d2-container>
</template>

<script>
import { AddObj, GetList, UpdateObj, DelObj } from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
export default {
  name: 'formArea',
  mixins: [d2CrudPlus.crud],
  data () {
    return {
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions
    },
    pageRequest (query) {
      return GetList(query)
    },
    addRequest (row) {
      return AddObj(row)
    },
    updateRequest (row) {
      return UpdateObj(row)
    },
    delRequest (row) {
      return DelObj(row.id)
    },
    doClearDict () {
      this.getFormComponentRef('tree3').clearDict()
    },
    doReloadDict () {
      this.getFormComponentRef('tree3').reloadDict()
    },
    doGetDictData () {
      const data = this.getFormComponentRef('tree3').getDictData()
      this.$alert(JSON.stringify(data), 'dictData', {
        confirmButtonText: '确定'
      })
    }
  }
}
</script>
